<template>
    <div class="wait-deal">
        <div class="header">
            <div class="state">{{refundInfo.process | refundProcess}}</div>
        </div>
        <div class="tips">
            <div class="note">
                <p>如果商家同意，请按照给出的地址进行退货</p>
                <p>如果商家拒绝，或在超时结束前未处理，需要您修改申请</p>
            </div>
            <div class="btn">
                <cancelRefund class="cancel" :refundId="refundId"/>
            </div>
        </div>
        <!--<div class="history" @click="toHistory">-->
        <!--<p>协商历史</p>-->
        <!--<div class="history-num" v-if="refundInfo.message === 'platform'">!</div>-->
        <!--<svg class="icon" aria-hidden="true">-->
        <!--<use xlink:href="#icon-chevronright"></use>-->
        <!--</svg>-->
        <!--</div>-->
        <!--<div class="address">-->
        <!--<svg class="icon logistics-icon" aria-hidden="true">-->
        <!--<use xlink:href="#icon-Positioning"></use>-->
        <!--</svg>-->
        <!--<div class="content">-->
        <!--<p>收货人：{{refundInfo.receiver}}</p>-->
        <!--<p>收货地址：{{refundInfo.mall_address}}</p>-->
        <!--<p>联系电话：{{refundInfo.phone}}</p>-->
        <!--</div>-->
        <!--</div>-->
        <selectCompany @company="selectCompany"/>
        <div class="logisticsNum">
            <p>物流单号：</p>
            <input type="text" placeholder="请填写您的物流单号" v-model="logisticsNum"/>
        </div>
        <div class="voucher">
            <p>上传凭证</p>
            <img-uploader :max-pic-num="6" toast-tip="不可超过六张"
                          :imageList="imageList"
                          @getPics="getImgList"
                          @beforeLoad="showLoading"
                          @afterLoad="dismissLoading"/>
        </div>
        <!--<div class="history" @click="toHistory">-->
        <!--<p>协商历史</p>-->
        <!--<svg class="icon" aria-hidden="true">-->
        <!--<use xlink:href="#icon-chevronright"></use>-->
        <!--</svg>-->
        <!--</div>-->
        <div class="record">
            <p>退款类型：{{refundInfo.status | refundType}}</p>
            <p>退款原因：{{refundInfo.reason}}</p>
            <p>申请时间：{{refundInfo.created}}</p>
            <p>退款编号：{{refundInfo.oid}}</p>
        </div>
        <div class="history">
            <h1 class="title">协商历史:</h1>
            <p class="note" v-if="historyList.length===0">暂无历史记录</p>
            <ul v-else>
                <li v-for="(info, index) in historyList" :key="index">
                    <div class="row-container">
                        <div class="row">
                            <h1>{{info.launch_type | nameFil}}：</h1>
                            <p>{{info.created}}</p>
                        </div>
                        <p class="content">{{info.content}}</p>
                    </div>
                    <ul class="pic">
                        <li v-for="(item, index1) in info.img" :key="index1">
                            <img :src=item @click="previewImage(info.img, index1)">
                        </li>
                    </ul>
                    <div class="line"></div>
                </li>
            </ul>
        </div>
        <div class="btn">
            <button class="commit" @click="commit">提交</button>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import API from '../../../request/api';
    import selectCompany from "../../../components/User/selectCompany";
    import ImgUploader from '../../../components/User/imgUpLoader';
    import {commonMixin} from '@/common/mixin';
    import RefundTypes from "../../../common/RefundTypes";
    import cancelRefund from "../../../components/User/cancelRefund";
    import {ImagePreview} from 'vant';
    export default {
        name: 'refund-state',
        mixins: [commonMixin],
        data() {
            return {
                refundInfo: {}, //售后信息
                status: 0, // 售后状态：等待审核或审核未成功0，等待商家收货1
                company: '', // 物流公司
                logisticsNum: '', // 物流单号
                picList: [], // 上传凭证原始图片
                imageLIst: [], // 上传oss返回的地址
                refundId: this.$route.query.refundId,
                imageList: [],
                historyList: [] // 协商历史
            };
        },
        components: {selectCompany, ImgUploader, RefundTypes, cancelRefund},
        mounted() {
            // 获取售后信息
            let data = {
                after_id: this.refundId
            };
            this.request.get(API.afternews, data).then(res => {
                this.refundInfo = res[0];
                // 获取售后商品信息
                let data = {
                    oid: this.refundInfo.oid,
                    gid: this.refundInfo.gid,
                    buyid: this.refundInfo.buyid
                };
                this.request.get(API.goodinfo, data).then(res => {
                    this.goods = res[0];
                }, () => {
                });
            }, () => {
            });
            this.request.get(API.afterconsult, data).then(res => {
                // 获取协商历史列表
                this.historyList = res;
            }, () => {
            });
        },
        methods: {
            toHistory() {
                this.$router.push({
                    name: 'refund-history',
                    query: {
                        refundId: this.refundId
                    }
                })

            },
            getImgList(imgList) {
                // 上传的凭证图片
                this.imageLIst = imgList;
                // console.log(111, '凭证', imgList);
            },
            showLoading() {
                this.showGlobaLoading();
            },
            dismissLoading() {
                this.hideGlobaLoading();
            },
            selectCompany(val) {
                this.company = val;
            },
            createAfter() {
                // 上传物流信息
                let data = {
                    after_id: this.$route.query.refundId,
                    company: this.company,
                    number: this.logisticsNum,
                    proof: this.imageLIst,
                };
                this.request.post(API.afteraddlog, data).then(res => {
                    this.hideGlobaLoading();
                    this.$router.replace({
                        name: 'refund-state',
                        query: {
                            refundId: this.refundId
                        }
                    });
                }, () => {
                });
            },
            commit() {
                if (this.company === '') {
                    this.$toast('物流公司不能为空');
                } else if (this.logisticsNum === '') {
                    this.$toast('物流单号不能为空');
                } else {
                    this.showGlobaLoading();
                    this.createAfter();
                }
            },
            previewImage(list, index) {
                ImagePreview({
                    images: list,
                    startPosition: index,
                    onClose() {}
                });
            }
        },
        filters:{
            nameFil(type){
                if(type === 'platform'){
                    return '商家'
                } else {
                    return this.$store.state.login.userInfo.nickname
                }
            }
        },
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import '~assets/main.styl';
    .icon {
        width: 4vw
        height: 4vw
        fill: gray9
    }

    .wait-deal {
        overflow-x hidden
        .header {
            background main-liner 100% 100% no-repeat
            color grayF
            height vw(80)
            display flex
            flex-direction column
            justify-content center
            padding cellPadding
            box-sizing border-box
            line-height 1.5
            .state {
                font-size word16
            }
        }
        .logisticsNum {
            flex-x(flex-start)
            background grayF
            padding 2vw cellPadding
            margin-top smallMargin
            input {
                flex: 1
            }
        }
        .address {
            flex-x(center, flex-start)
            padding cellPadding
            background-color grayF
            margin-top smallMargin
            .logistics-icon {
                fill gray3
                width vw(20)
                height vw(20)
            }
            .content {
                flex: 1;
                font-size word12
                color gray6
                margin 0 smallMargin
                line-height 1.4
                p {
                    font-size word14
                    color gray3
                    margin-bottom 2vw
                }
                .time {
                    color gray9
                    margin-top titleMargin
                }
            }
        }
        .tips {
            background grayF
            padding 2vw 0
            .note {
                padding 3vw cellPadding
                p {
                    line-height 1.5
                    word-vw(vw(12), gray9);
                }
            }
            .btn {
                padding 3vw vw(20)
                flex-x(center)
                .cancel {
                    color gray3
                    font-size word12
                    text-align center
                    width vw(150)
                    border vw(1) solid gray9
                    border-radius vw(30)
                    height vw(45)
                    line-height vw(45)
                }
                .cancel {
                    color main-color
                    border vw(1) solid main-color
                    font-size word14
                    text-align center
                    width vw(150)
                    border-radius vw(30)
                    height vw(45)
                    line-height vw(45)
                }
            }
        }
        .voucher {
            margin-top smallMargin
            padding 4vw 4vw
            background grayF;
        }
        /* .history {
             height vw(40)
             line-height vw(40)
             background grayF;
             padding 0 4vw
             flex-x();
             margin-top smallMargin
         }
         .history-num {
             word-vw(word12, grayF)
             display flex
             text-align center
             justify-content center
             align-items center
             background-color main-color
             border-radius all-radius
             width vw(18)
             height vw(18)
             position absolute
             right vw(32)
         }*/
        .record {
            margin-top smallMargin
            background grayF
            padding cellPadding
            p {
                line-height 1.5
                word-vw(vw(12), gray9)
            }
        }
        .btn {
            text-align center
            .commit {
                big-solid();
                margin-top vw(20)
            }
        }
        .history {
            margin-top smallMargin
            width: 100vw
            background grayF
            padding 0 cellPadding
            box-sizing border-box
            .note{
                font-size vw(12)
                color: gray9
                padding 2vw cellPadding 6vw
                text-align center
            }
            .title {
                padding 4vw 0 2vw
            }
            ul {
                .row-container{
                    min-height vw(60)
                }
                .row {
                    flex-x()
                    padding-top vw(10)
                    p {
                        font-size vw(12)
                        color: gray9
                    }
                }
                .content {
                    color: gray9
                    font-size vw(12)
                    line-height vw(16)
                    padding-top vw(11)
                }
                .pic {
                    flex-x(flex-start)
                    li {
                        width: vw(60)
                        height: vw(60)
                        img {
                            width: 100%
                        }
                    }
                }
            }
        }
    }
</style>
